<template>
  <div class="chart" id="chartId"></div>
</template>

<script setup>
import * as echarts from "echarts";
const props = defineProps({
  chartData: {
    type: Object,
    default: () => {},
  },
});
watch(
  () => props.chartData,
  (newValue, oldValue) => {
    const option = {
      title: {
        text: "周期分量 ACF 图",
      },
      tooltip: {
        trigger: "axis",
        formatter: function (params) {
          return `Lag: ${params[0].name}<br/>ACF: ${params[0].value}`;
        },
      },
      xAxis: {
        type: "category",
        name: "Lag",
        data: Array.from({ length: newValue.yData.length }, (_, i) => i + 1), // 生成滞后期标签
      },
      yAxis: {
        type: "value",
        name: "ACF",
        min: -1,
        max: 1,
      },
      series: [
        {
          data: newValue.yData,
          type: "bar",
          barWidth: "10%",
          // label: {
          //     show: true,
          //     position: 'top'
          // },
          itemStyle: {
            color: "#73C0DE", // 自定义颜色
          },
          markPoint: {
            data: [
              { symbol: "circle", symbolSize: 10 }, // 最大值上添加圆点
              { symbol: "circle", symbolSize: 10 }, // 最小值上添加圆点
            ],
            itemStyle: {
              color: "#fffff", // 圆点颜色
            },
          },
        },
        {
          data: newValue.yData,
          type: "scatter", // 使用散点图来画圆点
          symbol: "circle",
          symbolSize: 10,
          itemStyle: {
            color: "#FF5722", // 圆点颜色
          },
          z: 3, // 提升层级，确保圆点在柱子上方
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.value.setOption(option);
  },
  {
    deep: true,
    // immediate: true
  }
);

const myChart = ref(null);
const chartInit = () => {
  // 基于准备好的dom，初始化echarts实例
  myChart.value = echarts.init(document.getElementById("chartId"));
  // 配置项
  const option = {
    title: {
      text: "周期分量 ACF 图",
    },
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        return `Lag: ${params[0].name}<br/>ACF: ${params[0].value}`;
      },
    },
    xAxis: {
      type: "category",
      name: "Lag",
      data: Array.from(
        { length: props.chartData.yData.length },
        (_, i) => i + 1
      ), // 生成滞后期标签
    },
    yAxis: {
      type: "value",
      name: "ACF",
      min: -1,
      max: 1,
    },
    series: [
      {
        data: props.chartData.yData,
        type: "bar",
        barWidth: "10%",
        // label: {
        //     show: true,
        //     position: 'top'
        // },
        itemStyle: {
          color: "#73C0DE", // 自定义颜色
        },
        markPoint: {
          data: [
            { symbol: "circle", symbolSize: 10 }, // 最大值上添加圆点
            { symbol: "circle", symbolSize: 10 }, // 最小值上添加圆点
          ],
          itemStyle: {
            color: "#fffff", // 圆点颜色
          },
        },
      },
      {
        data: props.chartData.yData,
        type: "scatter", // 使用散点图来画圆点
        symbol: "circle",
        symbolSize: 10,
        itemStyle: {
          color: "#FF5722", // 圆点颜色
        },
        z: 3, // 提升层级，确保圆点在柱子上方
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.value.setOption(option);
};
// Lifecycle hook
onMounted(() => {
  chartInit();
});
</script>
<style>
.chart {
  width: 100%;
  height: 100%;
}
</style>
